
import { Button } from 'antd'
import React from 'react'
import './index.css'
import { DemoState, DemoEffect, DemoEffectCleal } from './demo'

class HookApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      userMessage: {
        id: '100001',
        name: '小毅'
      }
    }
  }
  chageUserMessage = (type) => {
    const { userMessage } = this.state
    if (type === 'name') {
      this.setState({
        userMessage: {
          ...userMessage,
          name: "小毅" + Math.random()
        }
      })
    } else {
      this.setState({
        userMessage: {
          ...userMessage,
          id: "id" + Math.random()
        }
      })
    }
  }
  render() {
    const { userMessage } = this.state
    let { id, name } = userMessage
    return (
      <div>
        <h2>父组件</h2>
        <h3>id:{id}</h3>
        <h3>姓名:{name}</h3>
        <div className="btnBox">
          <Button type="primary" onClick={() => this.chageUserMessage("id")}>chageId</Button>
          <Button type="primary" onClick={() => this.chageUserMessage("name")}>chageName</Button>
        </div>
        <hr />
        <h2>子组件</h2>
        <DemoState />
        <hr />
        <h2>子组件</h2>
        <DemoEffect {...userMessage} />
        <hr />
        <h2>子组件</h2>
        <DemoEffectCleal {...userMessage} />
      </div>
    )
  }
}





export default HookApp